This is completely different from the regular overflow issues people struggle with. First of all, I've only been able to produce this issue in Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox seem to behave as expected.
The body element grow with the content. No height: 100% or position: absolute styling used here.
The problem is that there seems to be something unknown forcing the browser to scroll further than it should by roughly 400px or more on both x and y axis. The inspector cannot select anything in this empty space and ends up selecting the html tag.
I've been through every element on the page and nothing seems to extend beyond the html tag!
Unfortunately I cannot link anything as the site is on a work server and requires authentication to access the page :(
I'm stumped, so any suggestions would be much appreciated!
I found that the issue involved jQuery UI, css provided with the plugin and my company's css. We use jQuery UI for input suggestion in our app.
What seems to be happening was that a recent change in our html structure set particular elements height and width to 100%. This css happened to include jQuery UI's ui-helper-hidden-accessible class. The css provided with the plugin sets ui-helper-hidden-accessible to, amongst other things, position: absolute; and clip:rect(1px,1px,1px,1px);. As the parent element was not explicitly set to position: relative;, the ui-helper-hidden-accessible element was overflowing, though due to the clip property it was not visible in the developer tools! Neither selecting the hidden element or clicking it in the dev tools elements tab would reveal how large it was.
There are two solutions to this problem:
Altering the css selector that sets width and height to 100%
Setting the parent element to position: relative;
Related
I have a website that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.
The page has two elements, nav and main that each have overflow-y: scroll set. This is so they can be scrolled independently of one another. If I scroll the main element, and then hover over the pagination buttons at the bottom, the main element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.
The common thread here is that the pagination buttons and the GitHub symbol on the right both have svg elements. If I get rid of the svg element the bug doesn’t happen. Also if I remove overflow-y: scroll from the main element the bug does not occur.
I’ve also noticed that the issue might be somehow related to having height: 100% set on the <html> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.
Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!
You can fix this by adding the following to body where your grid rules are defined. Sadly, I have no idea why this solves the issue.
body {
…
grid-auto-rows: 1fr;
}
After spending hours and hours on this, the only way I could figure out how to fix it was to switch from CSS grid to flexbox. 🤷🏼♂️
This is the diff that fixed it, if you’re curious.
This is a bug related to safari version 12.1, which is fixed in Safari Technological Preview.
https://bugs.webkit.org/show_bug.cgi?id=197189
However as a workaround in the mean time.
Can you try
overflow-x:hidden, overflow-y: scroll,
height between 50 to 95vh for the specific container depending on your surrounding elements. This is going to have minimal safari jump on hover and probably empty space at the bottom.
Even after Safari bug is fixed, seems that the bug still occurs on some other scenario. I successfully reproduced a similar behavior on Fluent UI dropdown: https://github.com/microsoft/fluentui/issues/23668
The workaround in my case was to change dropdown item height from "auto" to "100%".
I have an iframe wrapped with a iframe-container div which is taking 25% of the screen from right, all the elements are inside the iframe.
There is a textbox input field in iframe, upon touch, all elements are behaving properly and the windows adjusts as per the keyboard of IPAD however the moment I start typing, i.e any character is being added in the text input the whole layout of iframe-container shifts towards left and then after few more character inputs disappears completely.
Refer to the image below:
Screen one (this is the desired UI all the time)
Screen Two (Messed up UI after any character is entered)
Even this layout disappears when more characters are added.
I went through few solved issues of iframe with IOS devices and followed few concepts and solutions from there.
Iframe in this case does not have any scroll added to it. A div inside the iframe is being scrolled
Have also tried adding -webkit-overflow-scrolling: touch; to the scrollable div and this did not helped either.
Was using VH for height, tried removing them and used PX no luck there too.
NOTE: A lot of jQuery is being used of UI adjustments, not particularly for iframe and the cross button basically toggles the iframe-wrapper div (simple hide and show).
Thanks!!
EDIT
I have found the problem, now I need the solution for this.
Safari is automatically adding background-position property and setting it to Initial, manually override to no-repeat fixes the problem.
I tried adding jQuery css property for background-position but I guess it is somehow not being applied.
This is weird but I discovered 0 property was not working and the moment I added left and top instead of bottom: 0 everything was fine!!
I am not sure what is the problem, but my CSS is not working and I am not able to figure out what is the exact problem as I am new to CSS. I have tried the code on Chrome and Firefox and need someone to explain what is the real issue.
This is a Chrome screenshot and when I am inspecting the element then it highlights the <div> on the browser, but it is not visible.
This screenshot is from Firefox and I am using Firebug, but the interesting thing is all the content, which is not visible on the browser, has a different color (grey) than the content visible on the browser.
Can anyone explain me how to fix this?
The pale display within Firebug indicates that the element is not visible.
According to the Firebug wiki this can have different reasons:
Faintly displayed elements mean they are not visible inside the page. That is e.g. when the CSS style display: none is applied to the element or the element doesn't have any dimensions.
So it looks like the ancestor <div> with id ebBannerDiv_... is hidden (meaning it's offsetWidth and/or offsetHeight DOM property is 0) and therefore all its children are hidden, too.
It may be related to font-size and line-height being set to 0px for that <div>.
For further investigation you can check the dimensions and visibility of that element via the Layout side panel. If you see there that display is set to none or it's width or height are 0, you can then investigate further by checking the style trace for the width, height, display, font-size and line-height properties within the Computed side panel.
Have hit a problem I've never encounted before.
I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:
.myPanel{
position:absolute;
left:0;
}
This works fine, the mark up for the panel is generated by vaadin.
Now everything works fine, however every now and then when I refresh the page the css position:absolute
is being ignored.
Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.
Now the odd bit
When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.
So even though there is no new css, removing then re-adding position:absolute fixes it.
I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?
I have ONLY had this in chrome, currently version 39
Any ideas?
UPDATE:
if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).
I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.
This seems to be working according to the spec. If width and height
for a replaced element (which input is one) is auto, it's supposed to
use the elements intrinsic width and height, which might cause
absolute positioning to be overconstrained.
One fix is to wrap your inputs in a div, absolutely position that, and
use width/height 100% on the inputs. Note that Firefox also has this
behavior, and it is indeed in the spec, so it's better to fix the
website than to change Chromium.
~#9 chromo...#gmail.com
As per you saying:
I've noticed in the dom that vaadin is loading my custom javascript in
the head, then the css, then its own inbuilt javascript.
I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this
Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221
Long story short, I've been using sprite sheets and some of them might have quite huge dimensions. To get the image I need, I use the css attribute clip: rect(top, right, bottom, left), but something strange about clip is that whatever that is hidden is indeed not visible, but adds to horizontal (and probably vertical) scrolling to my browser when the browser window is small enough that part that would have been visible does not fit into the browser window even though they are not visible.
I found that adding a overflow: hidden attribute to any parent of the clipped image solves the problem.
The reason I'm asking here is, if it was my own pages, I'd just add that overflow: hidden to my html tag and be done with it. However, I'm making a jquery plugin and while I'm probably not skilled enough to make plugins that other people will use, I still want to make my plugins well behaved. If I add the css attribute through jquery to the html tag, would it cause unforeseen problems?
I would recommend using background position instead. As explained here: http://css-tricks.com/css-sprites/
It is more industry standard and you won't get those weird issues.