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.
Related
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.
I have a container which has position:fixed with scrolling content inside. I'm displaying this as a chat feature on mobile devices but on mobile Safari, the scrolling content inside the position:fixed container stops scrolling suddenly and starts to scroll the container itself.
Open this link on mobile Safari to see the effect: http://jsbin.com/ruyito
Editable example here: http://jsbin.com/ruyito/edit?html,css,output
The question: Why does my container div start to scroll its position suddenly and stop scrolling the content? (On Chrome on Android, it works without issue)
Note: if you're having trouble triggering this bug, keep scrolling the content up and down quickly for 10 seconds or so, eventually it will suddenly stop scrolling.
I've come across this issue several times when trying to use use overflow: scroll div's in iOS Safari.
My understanding it that it's to do with the overscrolling/elastic scrolling animations. What seems to happen is:
When a certain container (i.e. the window, or your scrolling div) is running these animations the events get locked to that container.
When an overflow: scroll container hits the top/bottom of it's scroll height it then starts scrolling the parent container - this is also the case in Chrome.
You may notice in your example that when the scrolling stops working, not touching the screen for a small amount of time (say 500ms?) then trying to scroll again works.
What I think is happening is that when you hit the bottom/top of your scrolling container, the events are getting locked to the parent, in this case the window. While you keep interacting in this state, your events never make it to your scrolling container, and so it appears to be unresponsive.
I've had some success in the past by not propagating the touch events from my scrolling container up to the document:
$('.chat-container-mobile').on({
'touchstart': _onTouchStart,
'touchmove': _onTouchMove,
'touchend': _onTouchEnd
});
function _onTouchStart(e) {
e.stopPropagation();
}
function _onTouchMove(e) {
e.stopPropagation();
}
function _onTouchEnd(e) {
e.stopPropagation();
}
Note: This will not be a fix in many situations, as you often need to retain default window behaviour. In this case though, you seem to have a fixed layout which doesn't require default document scrolling behaviour. Additionally, you will likely still see the same result if you attempt to scroll by touching on the top 'Group chat' bar or bottom 'Type message' bar, then quickly afterwards try to scroll within your container.
You could also try using e.preventDefault on $(document) for these touch events. This prevents the window from reacting to these user inputs in the first place, again though this can cause many other problems if you need to retain browser defaults.
Also try to localise these bindings only in situations where it's a problem. So check for iOS and Safari before binding onto the events.
I'll come back with any extra findings the next time I try to deal with the the problem - which, let's be honest, is almost every project.
Good luck!
Just try to add bottom:0 to .chat-container-mobile { bottom:0 }
I dont quite know what the deal is here. It might be that safari freezes when moving it that quickly because it still technically moves the container the way it should by the inspector tools definition, just does not portray it on the screen.
One thing you could try that I did in the inspector tools and seems to solve the issue is reverse engineering what you have. Try this changeup to your code. note the positioning/height/padding on your .chat-container-mobile and z-index/bottom/positioning on the other two elements.
<style>
.chat-container-mobile {
position: fixed;
background-color: #EBEBEB;
padding: 15px;
display: block;
margin: 0;
top: 0px;
color: #444444;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 50px);
padding: 75px 15px 125px;
}
.chat-mobile-header {
position: fixed;
z-index: 10;
width: 100%;
background-color: white;
color: #444444;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
font-weight: 500;
text-align: center;
top: 0;
margin: 0;
padding: 17px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.2);
}
.chat-field-mobile {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
margin: 0px;
padding: 12px 12px 10px 10px;
background-color: #EBEBEB;
border-top: 1px solid rgba(68, 68, 68, 0.1);
}
</style>
doing it this way those other elements just lie on top of your chat window instead of trying to stack or force your pieces together.
Hope this helps mate!
I opened the link ( http://jsbin.com/ruyito) iPhone 6 - Safari and everything looks fine. Content scrolls as expected. I tried many times up and down scroll but nothing happened.
At which version this happens? I couldn't say anything without experience the bug but i think it can be virtual scroll issue.
You can disable this by adding this.
.chat-container-mobile {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
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.
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.
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.