I use text-overflow: ellipsis in a webpage.
It does function as expected in Safari on iPad, but not in the webapp (link on home screen) viewed on the same device.
Is this a shortcoming of the iOS webapp implementation or am I overlooking something?
ANSWER: what happens is the iPad webapp cache does not react to clearing the Safari cache. So when I edit the webpage I don't see the change in the webapp.You need to add a manifest.
Text-overflow is pretty well supported, so I'm guessing something is going wrong here.
Do you also have white-space: nowrap; and overflow: hidden; set on the element as well? They're both needed to get the ellipsis to happen, as well as the container actually being small enough to trigger overflow.
Related
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
I am having some trouble with this and haven't found a solution.
The solutions I find are for background-size:cover; when applying to a whole page, whereas I am using this on a specific div.
First, the site is http://www.sexypizzamarketing.com.
If you check this site, there is a DIV with a background-size:cover for an image, and here is the css:
#div3 {
margin-top:40px;
background-image:url("images/Desert.jpg");
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#914211;
color:#201E1E;
background-color:#A4FFEE;
height:600px;
}
so as you scroll down, this 600px div moves over a fixed image. all of the research I've done is talking about how this background-position:fixed does not work on mobile. but when ive tested this on my android phone and a windows phone (and all browsers on PC) this has worked.
so really, unless you have an iphone, you won't be able to see this problem. ive used testmobile.me to test iphone, and it does not show up there. This is driving me crazy, because until now, I've been editing the live site, then asking someone to screenshot the site and send it to me... yea. 1. does any one know how to solve this?
So next, I decided to scrap this on iphones, would get rid of it for iphones. so I included this in css,
#media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
/* CSS overrides for mobile here */
#div3 {
background-color:black;
height:500px;
background-image:url("images/Background.jpg");
}
and this isn't hasn't solved it either.
**EDIT. this makes sense, but I didnt realize it. I put the #media only css to specify device width for a specific div (div3) above the regular div3 css, so it wasn't overriding. I moved it to the bottom of the section, allowing the #media to override the div3 css, so this solved that. A few things- this targets all media devices max width:700px, not just iphones. so i will look into that (because the site worked fine on windows and android phone)
As soon as I get the spare iphone and figure out how to connect it to localhost, then I will try the suggestions from alexander, because I don't want to risk messing something up by editing the live site through cpanel.
I'll be getting an old iphone for testing purposes as well.
but any suggestions, or if you can point me in the right direction, I'll make you some shrimp tacos or something.
I am trying to remove or at the very least reduce the page margins when printing a webpage from an iPad. I have attempted various forms of the #Page directive as indicated by MDN, but it has had no effect. Examples of attempts:
#page {
margin: 0.5cm;
}
Also:
#page
{
size: auto;
margin: 0mm;
}
body
{
margin: 0px;
}
I then proceeded to try to find some documentation of whether or not iOS safari supports the #page directive, but all I found was a SO question from 2009 that said safari in general doesn't support it, which to my understanding is no longer the case, and regular safari does in fact support it.
So, is it possible? Am I doing something wrong with #page that causes it to ignore margin? Or does safari for iPad simply ignore any attempts to change the margins via css?
Unfortunately, it looks like what you are trying to achieve is not possible.The Safari CSS Reference only lists basic support for Paged Media and is missing support for the size property. As a result, Safari (desktop and mobile) does not support applying margin or size properties within the #page rule.
I also did some additional testing with Safari Mobile for iOS 8 in regards to printing with the simulator. I was able to confirm that it is not possible to modify the paper margins or remove the print footer at this time.
I have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.
I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.
Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.
I have included a screenshot:
I have never seen anything like this before. What could it be? thanks verymuch!
ADDITION:
Here a live example:
example offline, sry
Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.
ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...
Put...
<section id="main-top">
<div id="bg">
inside the .container. You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.
Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.
When you scroll on a web page in iOS 7s Safari the URL bar shrinks and the bottom navigation bar disappears. In the site I am working on these two things to not happen.
The momentum/inertial scrolling was not working as well until I added -webkit-overflow-scrolling: touch; to the html element.
I can't imagine what element I have added to the code to have it lock up Mobile Safari like this.
Hoping this isn't a repeat question, it's hard to know what to call this besides "shrinking/hiding".
I accidentally stumbled upon the solution last night in an article by Maximiliano Firtman's article Breaking the Mobile Web. The article points out many issues with the new Mobile Safari in iOS 7.
The solution to my problem was close to his answer (his being if there is overflow: scroll; on your page it will not trigger the auto UI hide feature) mine was an overflow: hidden; style.