Chrome Text Shadow Bug on Retina Display - html

Codepen Link: https://codepen.io/calebzahnd/pen/OWxxLw
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
}
Screenshot:
I've found what I can only imagine to be a bug in Chrome Browsers when displaying on a Retina screen. There is a strange clipping on the text shadow, and the text shadow itself is pushed way below the actual text. When adjusting the font-size, the clipping will randomly change to only clip certain characters. If you adjust the blue value of the text-shadow, certain values will snap the shadow back to where it should be located, but without any sort of rhyme or reason. I've checked and this displays fine on Safari and Firefox. Can someone explain what is going on here?

I can perfectly see the text shadowing in Chrome and Safari browser with my retina display screen.
Try updating your browsers and/or clean your cache.

h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
margin-left:25px;
}
<h1>This is what you want everyone to see</h1>
The problem is that there is this large shadow, and the text is right against the pixel edge. Some devices/browsers won't render past the pixel edge of a window or a div. My suggestion is a 25px margin to the left of your text. Perhaps even 25 all around.

Related

iOS7 Safari - anchor changes width first time it is tapped

I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.

Same amount of pixels rendering differently across OSes

The filter bar on my site - http://grailed.com is rendering differently in Chrome on Windows and Mac even though Chrome says the height is 31px on both.
Here is an image of the Mac rendering. This is how I want it to show up.
Here is an image of the PC rendering. Zoomed in on the offending area.
On top of that the globe icon and the dollar sign are at differing heights. I have no idea where to start with this issue, any tips would be appreciated!
Let's take a glimpse at your CSS (after being run through an un-minimizer, and using some of the DOM inspection tools of different browsers):
.filterhead {
text-align: center;
cursor: pointer;
background-color: #e1e1e1;
padding-top: 10px;
}
...
h3 {
font-family: "SackersGothicStd-Heavy";
text-transform: uppercase;
font-size: 13px;
letter-spacing: 6px;
padding-bottom: 5px;
padding-top: 4px;
color: black;
font-weight: normal;
}
The majority of the height of your header is defined by the the "padding-top: 10px" setting as specified by the filterhead class. Padding-bottom is 5px as specified by h3. And the font size is effectively 16px. (10+5+16 == 31).
Change the padding-top attribute of .filterhead from 10px to 5px and it starts to look like what originally showed in the pic representing the Mac rendering. That should probably do it for you.
But no matter what, I'll never be able to rock that $500 dress shirt with the hearts printed on it that you have for sale on your website. That takes some serious stylin' to pull that look off.
http://assets3.grailed.com/uploads/photo/image/11138/display_upload_2F1393376651400-xu5dk1ezfx-b4c0f2f9854185bc01c09e5a9b232221_2F
Try using CSS to specify the size an margins.

How so I set an inline span to have the same height when containg text in both Chrome and Firefox?

I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.

how do you workaround this inconsistency between IE, Firefox and Chrome

i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Background image rendering issues in Mobile Safari (iPad)

I'm experiencing a simple, yet unexpected rendering issues when browsing my webpage using Mobile Safari and iOS.
Basically, my page has tabs, which are made of three divs and a "a href" inside the center div of the tab. The divs on the sides contain a background while on the center the link has an image. For some reason, the background on the a href displays horizontal yellow lines on Mobile Safari:
http://i.stack.imgur.com/jlKHf.jpg
While on desktop browsers it works fine:
[couldn't add another link, it should be whiteish]
.TabPanelLinks_true {
background: url(".../seltab-center.jpg") repeat-x scroll 0 0 transparent;
}
.TabPanelElement a {
color: #5C5C5C;
cursor: pointer;
display: block;
font-family: arial,helvetica,clean,sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0 5px;
text-align: center;
text-decoration: none;
}
I've tried with a different image, no success. I tried adding the background to the center div, no success. Any idea of what's happening?
Thanks in advance.
I wish there was a way to experiment with this, seeing as I don't have an iPad--but possibly specify a border : none; ?
You could try a single div, with the 'ends' of the tab as absolutely positioned images to the left : 0 and right : 0 ...an alternative method that shouldn't look any different, but may fix the issue? If you need the transparent background on the tab graphics, you could absolutely position the images outside of the div, and adjust the margin/padding accordingly.
I think this is due to background layers not getting masked correctly, or at least that was my problem. It seems to happen when there are multiple backgrounds overlaid over each other.
Single/sub pixel misalignment of divs on ipad and iphone safari
Following the advice of someone in that thread, I added this
border: 1px solid transparent;
to the div that was getting the weird lines, and that fixed it.