I'm using the technique specified at the end of this thread: Highcharts tooltip overflow is hidden to allow tooltips to flow outside the highcharts-container.
Everything is fine except when viewed in IE10 on Windows 8.
A large amount of white space is displayed underneath the chart when .highcharts-container {overflow : visible} is set.
Here's a demo of the problem:
http://jsfiddle.net/Bp4zG/6/
You need to view the demo in IE10 on Windows 8 to see it.
Is there another way to flow tooltips outside the container? Or a way to remove the mystery whitespace?
This is a problem for my app as it manifests in a very wide page with a horizontal scrollbar which in turn messes with some scrollTo js functions I have.
Managed to fix it by wrapping everything in a div with overflow: hidden
html
<div class="wrapper">
<div id="container" style="height: 300; width:100%"></div>
</div>
CSS
.highcharts-container {overflow: visible !important; }
.wrapper {overflow: hidden;} /* the fix! */
See fix here: http://jsfiddle.net/Bp4zG/8/
Related
After updating my iPhone 8 Plus to iOS 13, i noticed a weird behavior with the new volume HUD on my website. The new volume HUD won't disappear after interacting with the volume buttons. It shrinks to a simple bar, but never disappears completely. only happens in some webpages where i have a fixed view, no vertical scrolling. Can it be related to a CSS rule? As soon as i hit "back", or go to another page that has the vertical scroll enabled, the volume HUD disappears as it normally should. Anyone else had this issue? If you did, what caused it and how did you solve it? It's terribly annoying as the new position of the volume HUD covers a bunch of controls in those webpages that i noticed the issue in, so need to find a solution to fix this aswell as keep things functional for iOS12 or lower users.
another issue i noticed with iframes, those that were supposed to be scrollable in this format:
<div style="overflow-x:scroll">
<iframe >
...
<video></video>
</iframe>
</div>
in ios12, the iframe used to be the same width as the video it contained, let's say 1200px width, and on mobile i was able to scroll the iframe horizontally, and focus on the part i wanted. in ios13, the width of the iframe is that of the device, meaning i cannot scroll it horizontally anymore.
I have a temoporary fix in place, using jQuery i get the video's width and apply it to the iframe, but this causes new issues and i want to go back to the way it was. Why is the iframe different in ios13 than it was in ios12?
Thanks
Already trying to remove CSS rules one by one and see which causes this, but no luck so far. looking at removing overflow:hidden rules aswell as -webkit-overflow-scrolling rules to see if this is related, only ones i can think of that might have anything to do with it. Or maybe a meta tag? ? But this one is added on every webpage on my website, so not it.
Expected result: normal behavior, volume HUD disappearing after interacting with it anywhere.
iframe scrollable without requiring jQuery to set a fixed width to the iframe
EDIT:
the block of code that causes the issue. removing the block will clear out the issue. so my guess is still something regarding css rules.
<div id="webcam" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;position: relative; background-color: black;">
<video id="h5live-webcam" type="application/vnd.apple.mpegURL" playsinline="true" src="https://stream01.****.com:443/h5live/http/playlist.m3u8?url=rtmp%3A%2F%2Fwowza02.****.com%aaabad&stream=1000000.mp4%3FcSessionId%3DguestKey&random=142989" style="width:initial; margin:0px; transform:none; height:100%; width:initial;"></video>
<div id="middleView-webcam" style="width: 83px; height: 83px; position: absolute; left: 50%; top: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 1000;">
<canvas id="loadingSign-webcam" style="z-index: 1001;"></canvas>
</div>
</div>
UPDATE 2: issue is related to NanoPlayer and playback options (muted, automute etc.) . haven't solved yet, but narrowed it down.
iOS 13 changed the behavior of iframes. They used to not scroll and expand to fit content (flattening). They now work like all other browsers. Applications which worked around the iOS iframe scrolling issue with the scrolling DIV may be impacted. Trying to find out if there is a way to revert this DISABLING FLATTENING OF FRAMES via configuration so that iOS 13 can behave like pre-iOS 13. It is a huge message.
See the release notes for iOS 13 about removed features:
Disabled frame flattening on iOS. Frames now render in the same way as
a desktop browser.
Bug information listed in bugzilla.
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
I built a grid layout using a Codrops tutorial and my own knowledge. The grid is setup using display:inline-block; and nth-child to remove padding from the last element so they do not break to the next line. As the grid size changes, I use a different nth-child in the media query to remove padding from the last element, whether it be the 3rd element, 2nd element, or the 1st.
Everything works swell in all desktop browsers, but does not work on iPad.
For some reason on iPad, the grid is breaking in the wrong place, which looks awful.
I don't know where to begin to test this bug because it works fine when scaling the browser window down. I've tried some testing with iOS simulator to no avail. However, what is interesting, is on the initial page load the grid works fine, then once fully loaded, the grid breaks.
You can view the problem here (on iPad): http://www.eugeniacameronfoster.com/new/paintings/
Thanks!
There are a few issues that a CSS Tricks article points out.
Basically you need to remove the space between the divs in your grid, so that instead of
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
you need to put
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
I will put in a vote for you to just bail on the inline-block idea and go with flexbox or box-sizing: border-box;
There's a workaround that doesn't require to change the html markup.
Using a negative letter-spacing of -0.31em on the parent ul and then resetting the letter-spacing in the li the space between the lis disappear.
ul {
letter-spacing: -0.31em;
}
li {
letter-spacing: normal;
display: inline-block;
}
An example can be seen here: http://jsfiddle.net/c67U4/
This trick is used in particular in PureCSS grids that use inline-block instead of floating elements.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
I developed a good site layout which works like a charm in Webkit and FF based browsers... but in IE 7 and 8 everything get broken up like.
I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.
If I remove all the jquery css everything works fine.
You can see it working on [removed]
Can anyone hint me on how to solve this mess?
You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.
You can use firebug in firefox to go throught the css files.
To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.
EDIT:
You need to override this three:
<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">
The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.
Try to change this and you will see the changes:
This could not be the exact solution, but it really points out the problem on your pages.
on the clear class
remove the clear:both; or make it clear:none;
on the separator class
add float:right and margin-right:200px;
on the pie id
add float:right; and margin-right:200px;
the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)