I'm trying to figure out why iOS9 positions my mobile menu button 7px lower than every other system/browser in the world.
I don't know how to cleanly extrapolate this into a fiddle, but the bug is on iedm.com menu button on iphone or ipad iOS9 safari or chrome.
At first the iOS9 upgrade caused it to disappear completely, then after some troubleshooting and experimenting with it for an hour I've got it showing now but for some reason it's 7px lower than any other device (causing to become non-centered).
I'm asking if anyone knows what I can look for to debug, or any css rules or hacks specific to iOS9 that would cause the positioning to function differently.
Such an ambigous bug... thanks for any help.
I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.
Folks I'm baffled. I've produced an HTML page which uses CSS animation and some very basic Javascript. Although I'm sure I haven't done it the best/most efficient way (still a bit new to this), it works enough for me to be happy with it, but when running in Chrome, Safari or Opera I run into an intermittent issue with how some elements are rendered.
Live example: http://careers.dept.shef.ac.uk/MOOCs/STAR/
Navigate down to "Problem Solving Skills", then from there navigate to either "Communication skills" or "Leadership skills". The navigation buttons that were at the bottom Problem Solving Skills are still visible. But they're not really there... if I hit Ctrl+A they disappear. You can't click on them, they're just left there.
I've tried this on a few PCs and had the same issue. Sometimes it doesn't happen at all. It doesn't seem to happen on IE or Firefox. Could it be to do with how these browsers render elements and how they process opacity?
Many thanks in advance.
EDIT: here's a screen grab: http://i.stack.imgur.com/FPtGQ.png
It's a long shot, but you have malformed HTML on those buttons, trying fixing that and see what happens:
<p class="btnText">Communication skills</p class="btnText">
should be:
<p class="btnText">Communication skills</p>
Edit
Okay, try adding this style to .example2:
height: 100%;
and change overflow to:
overflow:hidden;
The issue is that tooltips are still appearing even when values aren't truncated.
The behavior varies in different browsers. In chrome, starting at 110%, the autotooltip isn't working correctly already. In firefox and IE, you have to zoom in more to replicate this issue.
My hunch is that cell widths are being messed up when zooming in the page but I'm not so familiar how each browsers scale the elements in the page. I'm also uncertain if there are ways to control this?
Any ideas on why this is happening and possible ways to fix this?
For some reason, black boxes are displaying in random spaces in Chrome (latest build).
Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after scrolling, and will often disappear when opening the inspector, hovering over elements, or scrolling down and back up.
For reference, there are some animations, box-shadows (which have been disabled with no luck), linear gradients, and position: fixed elements on the page, although this is not an issue with browsers other than Chrome.
This has been widely reported in user testing, although I have not been able to conjure up a fix. I am not sure if it is a CPU or graphics card issue, as the site is relatively lightweight and I am browsing with a new laptop with 16gb ram. My old Mac Mini, with 4gb of ram, does not produce this issue.
Any pointers would be most appreciated.
Update: This was a bug in Chrome and was fixed: https://code.google.com/p/chromium/issues/detail?id=142038
eddz filed the issue at crbug.com/new and over 40 people starred the ticket to follow along. It led to a few separate fixes in Chrome by the engineering team.
I had this issue with a website that was using transformZ (0) to force GPU rendering. When I removed this style the issue disappeared
This isn't an answer, but if you are able to somehow reproduce it maybe later on down the road:
Make a copy of the page locally, or anywhere, set the base href to the main domain, now start removing css links and js scripts from the bottom to the top until you don't experience the behaviour anymore, if you get to that point then the last script/stylesheet you removed is the culprit.
If you find the culprit file, now try finding the culprit line/section.
If you don't get to that point, it may be the browser, but it doesn't sound like it is.
It may also be linked between scripts/stylesheets and/or accidentally inherited.
We had experienced this weird blocks too on our website. In past we was using transitions, transitions was reproducing another bug "weird lines" randomly appeared on page and dissapear during scroll.
Now we start using transformX-Y, may be in some places Z too. And we have got this hell bloack blocks.
It seems something wrong in Chrome with transfom + transition animations. May be this bug appear when too much blocks animated at one time?
FF works fine.
I encountered these same boxes. For me, the problem was that I was using mp4 videos, which are deprecated in chrome, instead of webm videos.
I think is related to the GPU I had the same issue on my website. And it stopped happening when I turned on the Metal Rendering flag.
My website renders back bgs randomly while scrolling. It is really heavy on videos and animations and looks like chrome has so little GPU available that graphic intensive website doesn't work correctly on blink. I noticed that when chrome used webkit those issues didn't happen.
I this is a blink render issue.