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.
Related
The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!
this is a very specific question for a site I'm helping a friend troubleshoot. I understand if it doesn't get answered or if this question gets closed.
I was wondering if someone with a Mac and Safari could help me troubleshoot the below issue with the inspector..I'd be happy to buy you a beer next time you're in town. I'm on PC and can't replicate the problem.
This problem only occurs on Safari for Mac OS only. Chrome, Firefox, IE and other browsers display correctly.
There are a couple divs at the top, full width containing a logo and navigation.
http://912-registry.clubexpress.com
On Safari / Mac OS, my friend is saying that the big image slides on top of the navigation and underneath the logo bar at the top.
I've tried the full width 100%; position:relative; tricks as described in similar questions.
I have an idea why it's happening, because the large image is first in the DOM, the nav follows in the HTML and nav is fixed at the top with CSS. This was a kludge to avoid having to re-write the html and reorganize (which may have to be done). However, there may be a simple fix to the css hack that someone on Safari could find.
z-index? A position relative somewhere that's missed?
Otherwise back to the drawing board.
Whaddya' say Mac guys?
Does Safari have issues with Media Queries and positioning? My website looks fine in Chrome and Firefox, even looks ok in IE. In Safari, there are weird margins and the forms fall apart. Any ideas on how to fix it? Sorry it's not too specific but I don't know what's causing the issue.
When I change the browser size, things start to move to the right place. It appears to fall apart when it's above 718px in the Contact and Portfolio section.
My website is tiffanymackins.com.
use vendor prefixed for display flex and inline-flex, see this:
https://css-tricks.com/using-flexbox/
I'm in the middle of development of a website, however I cannot work out what is causing this plethora of issues.
In Safari on OS X (7.0.6 on 10.9.4), random elements will disappear and reappear and hovering over the drop down menu, or a button, they suddenly re-appear. It is very strange and erratic.
In Chrome (v36.0.1985.143) and Firefox (v31.0) the scrolling performance is poor, but no rendering issue.
All onscroll events are clean. I've tried tweaking with just about everything and gotten nowhere.
If anybody can work this out, I'll be greatly appreciative.
Thanks in advance.
I don't see any scrolling performance issue on chrome or firefox, but I noticed Safari rendering glitches.
When you force reflow, all your sections are displaying again. Try to add a backface-visibility:hidden; on your .section class.
Edit:
Your #background-area is fixed and doesn't have any z-index. Put it to z-index: -1; to keep it in the back.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar