This is a little weird... I coded some web pages for a client recently. Everything looks great on most browsers, but on his iPad, he's seeing what he called "fuzzy fonts." Looking at his screenshot, it's clear the font is rendering twice, with the second rendition offset by two pixels. This is how it looks on his iPad:
This is how it looks (and should look) on my PC:
Looking more closely at the web page, it's not just fonts that exhibit this issue. Borders around a div, for example, are also doubled.
I'm pretty sure I've seen this phenomenon before, but haven't been able to track it down. I figure it's got to be a device issue, but I'd still like to find solution if possible.
Any thoughts?
Related
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
Background info: I'm working on a public facing website for our company. developing in VS2012, asp.net and vb.net, using some JS, some JQuery, and a decent amount of CSS.
Everything was looking great in our internal testing, until someone checked from home, where they only had IE 9. Suddenly, big chunks of text within expanding panels weren't being displayed, the bottom of the page was missing in most cases, some links that call javascript functions don't do anything... It's so random that the only reason I think they're connected is that it only happens in IE9 (or probably before, though no one has looked.)
I tried setting the standards mode to edge in the web.config. (tried setting it to IE10 as well, just to try) I've played with changing some positioning, heights in px instead of %, relative to fixed positioning, tried inserting the html5shiv, removing the gradients... nothing has changed. Everything displays correctly, until it doesn't display at all. When I was starting to see and research this last week, I thought I'd found an article somewhere that said there were limits on the CSS tags you could use in a page for IE9, but that number was WAY higher than anything I'm using, including both what's on the page directly, and incorporating the .css file. The only other clue is that it looks like at the bottom, where the missing stuff starts, I also lose the gradient from the page background (so just a block of all white, however if I play with the size of the window, sometimes I can get this block to slide down, and I can see another line or two that was originally hidden...
Has anyone had issues like this? The site works perfect in chrome, ff, IE10 and 11, several Linux browsers, opera, safari, from macs, pcs, and Linux boxes. everything except this old IE 9.
HELP?
Just a little hack fix I found, if anyone comes across this question looking for similar answers... I created a new css file implemented when IE9 browsers are detected, and I extended the min-height for the content of pages until every page displayed... the drawback is that on those longer pages, if the content isn't expanded, the footer still lies several scrolls down... but this only happens on the very content-lengthy pages, so while it isn't ideal, I guess it's good enough, if someone's ok with using outdated browser technology :/
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
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.
I want to test my html page visually in every browser like chrome FF and IE, like the position of all the elements and padding and margin in the page is correct or not.
Now what I am doing is I open the page in two browsers and I cascade the two browsers side by side and I compared it with my eyes.
Now my question is : is there any tool or plugin available to test the page by overlapping the page in IE with the same page in chrome or FF so that I can find any difference in visual representation of the elements, so that I could correct it.
Just like screen shot comparison (in screenshot comparison I can't compare the entire page and moreover I can't overlap one screenshot images one over another)?
This is the wrong way to go about it. Attempting to get each browser to match pixel-for-pixel is a futile endeavor and only leads to frustration, code bloat, and wasted effort.
Design for the valid browsers (typically the Webkit ones and Firefox). Then fix, as needed for the others. But don't try to get things to mesh pixel for pixel.