The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)
Related
I want to lose an element in my site that appears to a certain place while scrolling down the site. However, I only want to do this by phone. I think I can do this with the #media tag but I don't know how to look up to a certain place and then lose it is there that can help ?
You'll want to use the browser inspector and the option to resize the web browser to above and below the width of the phone size you're targeting. If you're using Google Chrome then there's a handy guide here on how to use the device mode in developer tools: https://developers.google.com/web/tools/chrome-devtools/device-mode
The other thing you'll need to do is to target the element in CSS and hide it depending on the browser size. The syntax will look something like this:
#media (max-width: 640px) {
.the-class-name-value {
display: none;
}
}
You'll need to replace the 640 part with the maximum browser size you want to target, and replace the the-class-name-value with the value of the class attribute on the actual element. Hope this helps!
I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:
#section1{
background: url("background1.png") auto 749px;
height: 749px;
}
The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?
My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.
It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS
There's a problem with your CSS rule:
Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.
What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.
To get it to work in shorthand notation it has to look like this:
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
background: url([URL]) 0 0 / cover;
The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
CSS
section {
width: 200px;
height: 100px;
border: 1px solid grey;
}
#section1 {
background: url(http://placehold.it/350x150) auto 100px;
}
#section2 {
background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}
#section3 {
background: url(http://placehold.it/350x150) 0 0 / cover;
}
#section4 {
background: url(http://placehold.it/350x150) 0 0;
background-size: cover;
}
Demo
Try before buy
Further reading
MDN CSS reference "background"
MDN CSS reference "background-size"
<'background-size'>
See background-size.
This property must be specified after background-position, separated with the '/' character.
I hope this will help someone in despair.
In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).
Diminishing its size and quality solved the loading issue.
The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.
Great fundamentals by #insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.
Background image disappears on the IOS Browser (iPhone/iPad).
This is the code i used:
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.
<div class="download">
<picture>
<source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
<source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
<img src="/images/ios-device.png" class="imgright">
</picture>
</div>
This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.
background-attachment: fixed; is not supported by IOS.
You can fix this by keeping the image in the div and positioning the div.
Hope this will work.
I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.
I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.
Once I did, the background rendered as expected.
#media only screen and (max-width:599px) {
[id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}
#media only screen and (max-width:479px) {
[id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}
Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).
Add a background-color solved my problem
background-color: #F4F4F2;
I had to set input { opacity: 0; } for my input + span {} icon to show up.
I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.
I tried resizing my background image, made it way too small to test the theory, but it still wouldn’t show on any browser on the iPad (and presumably an iPhone). Tried other solutions that are listed here – still no good. Then I noticed that the element had inherited display: table;. Added display: block; to override that and the background image now displays on all divices that I've tested it on.
It's an old issue, i would like to share my solution here. iOS bigger image than the dimension ignores rendering, please use appropriate use size, not the css height/width. The actual image should not be more than 150% larger in size than the rendering viewpoint.
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
Short question
Using CSS only, how do I detect that the background-size property is supported? If it's not supported, I would like to provide some fallback CSS. I already know how to do this with Javascript, but it's cleaner with CSS.
Long question
I have a high resolution sprite image that needs to look good on all cell phones, regardless of its exact pixel density. By using a background-size trick, I can scale the sprite appropriately.
.sprite {
background-image: url(sprite180x76.png);
/* 180 / 2 = 90 */
background-size: 90px auto;
}
There are some iOS and Android versions that don't support the background-size property, so the sprite would look twice as big as it should be. For these old systems, I would like to load up a low resolution sprite with no background scaling:
/* fake CSS */
#notSupported(background-size)
.sprite {
background-image: url(sprite90x38.png);
}
}
CSS doesn't have conditional statements as it's not a programming language like Javascript. Although, I believe there might be some kind of conditional statement in the works for CSS.
You'll have to rely on JavaScript to achieve any kind of conditional test case for CSS.
Meaning, you can't directly detect support for CSS.
However, CSS does have a "trick" thanks to its "Cascading" nature, but it's only usable when looking to replace some older code with newer code for the same style.
That sounds funny, here's a couple of examples:
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
In browsers that do support the official CSS, it will the style as denoted on line 5. While in older versions of say Firefox, line 1 will get applied and line 2-5 will get ignored because they're unknown.
Another (and perhaps better) example could be:
background-color: #AAA;
background-color: rgba(0, 0, 0, 0.5);
This code will give the background a grey color, while newer browsers will give it a black color with a 50% transparency, overriding the old color.
Hope that helps a little.
Cheers!
-- Update --
I did just come across something that might help. In Aaron Gustafson's book "Adaptive Web Design" he mentions how CSS will ignore an entire rule if a given browser/renderer doesn't support a given selector.
With the concept above, if you can find a selector that was not implemented in the older version but is available in the newer version you could do something like this:
/* fake CSS */
.sprite {
background-image: url(sprite90x38.png);
}
[[ selector that is supported by newer browser/OS ]],
.sprite {
background-image: url(sprite180x76.png);
/* 180 / 2 = 90 */
background-size: 90px auto;
}
The idea is that for the "old" browsers you can load the old PNG but for the newer browser it will load the larger PNG and apply background size.
The only thing I would be concerned about is if this causes the supportive browsers to load both images but apply one.
And this still requires finding an unsupported selector in one version of another. Quicksmode.com might help you find one:
http://www.quirksmode.org/css/contents.html
-- UPDATE 2 --
I put this in the comments but I'll add it here as it might help. I spent some time trying to find out what browser version iOS 3.1.3 supported and therefor what selectors might be possible to use with the above trick.
What I found was this Apple developers site: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html
If you do a page search (ctr+f) for background-size, it shows that iOS 1+ supported a proprietary version called:
-webkit-background-size: length
-webkit-background-size: length_x length_y
That might be a possible solution. If you add that before the real one, you can ensure backwards compatability.
-webkit-background-size: length
background-size: length
Hopefully that helps find alternate solutions since the original question of doing a conditional test to see if a rule is supported is not possible in CSS right now.
You can't (for now) detect support of property A and, given or not this support, serve different values for property B with CSS only ...
... except if the browser support for properties A and B is exactly the same! Then instructions below:
selector {
propertyA: valueA;
propertyB: valueB;
}
will both fail or both succeed.
The remaining problem is to find a CSS property that has the exact same support than background-size :)
I was thinking about multi-background : it should (not) work in IE6/7/8 according to CSS Background Properties support in Standardista but I can't test in iOs and Android, only in bada/Dolfin 2.0 (Samsung Wave; also based on Webkit).
Here's a Fiddle : http://jsfiddle.net/PhilippeVay/2VaWu/
that shows a paragraph with only a simple background that any browser should display and then another paragraph with both a simple background and (*) a multi-background resized with background-size that only modern browsers should display (older browsers should display the same background as for the first paragraph).
Fx9 and dolfin 2.0 both display correctly the second paragraph. IE8 doesn't, as expected.
Another solution would be to use a selector understood by browser versions that also understand background-size but not understood by others. Though it's easier to find for IE than for smartphones based on Webkit!
(*) using a different CSS rule with higher specificity, for the purpose of the demo. In real world, there'd be only one rule with simple background defined before the multiple background.
This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:
(this is Reenie+Beanie from google fonts)
http://jsbin.com/ojeqe3/16/
Screen capture
You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in
My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)
Update:
This one is not fixed in iOS5.
The best solution I know for the problem will be
Use font-weight:normal (as shown in demo)
Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)
Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;
It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.
In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".
Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.
Solution 1. Use the appropriate font-weight
So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:
h1, h2, h3, h4, h5, strong, b {
font-weight: 400;
}
/* or font-weight: normal */
Solution 2. Use a font that does provide the bold/italic style that you want
The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.
Solution 3. Fake the faux using other means
If you really insist on wanting a faux bold style you can try using a thin text-shadow or text stroke.
don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.
I had the same problem. It went away when I removed any mention of font-weight.
Try applying this css rule:
-webkit-font-smoothing: antialiased;