IOS8 doesn't render CSS box shadows correctly

According to an article at "caniuse", iOS7.1, 8, and 8.1 are supposed to support the CSS3 property box-shadow. However, I have an html file to which I could direct you which shows that this is not the case. The file I have is simple-minded, containing CSS only for the box-shadow in question. When presented in iOS8 Safari, no box-shadow is rendered. When presented in MacOS Safari, Firefox, Chrome, or Opera, the box-shadow is rendered correctly. Is this (and are other) iOS8 CSS3 limitations documented?

It works for me, but its a little flaky when zooming in. It disappears after a certain zoom level is reached.

Similar Messages

Firefox doesn't render my web page correctly other browsers do

Hi My website works correctly in IE9, Safari, Opera and Chrome but Firefox doesn't render my Contacts page correctly. The contact form position is wrong and the navigation does not work for the Contacts page. The only issue is with Firefox which fails to render the Contacts page correctly. Both HTML and CSS validate.
The website is http://www.pcwebsite.org.uk

thanks you for the link. I'll try that option next. But clearly since:
Internet Explorer 9,8, even 7
Chrome
Safari
and Opera
render the webpage correctly and there is no issue with validation of both HTML and CSS, then surely Firefox is not working to industry standards.
I can use any browser I care to but I can't control what browser my potential clients use.
"I'm not sure if this is caused by the floating sidebar content as a style rule of clear:both or clear:left partially fixes this at least horizontally (it is still off to the left)."
There is nothing wrong with the code is there as it works perfectly with the other browsers listed above? Maybe I should put the whole web page in a table.

Is there a way for converting this Photoshop drop shadow to CSS box shadow?

Here's my PSD: http://d.pr/f/ML9l
Here are the specs:
Color: #3b5c7f
Angle: 90 degrees
Distance: 2px
Size: 4px
Contour: Linear
Here's what I've come up with so far, and though quite similar, it is not exactly the same thing:
http://jsbin.com/akuleg/1/

Are you a Creative Cloud member? With the recent Photoshop update, you can use the tool "Copy CSS"
It copies the style to the clipboard and you can paste it into your code. Here is what your file generated:
.Shape_5 {
border-radius: 3px;
background-color: rgb( 228, 224, 223 );
box-shadow: 0px 2px 4px 0px rgb( 59, 92, 127 );
position: absolute;
left: 56px;
top: 123px;
width: 287px;
height: 54px;
z-index: 2;
Hope this helps!
Julia

Photoshop doesn't render a pdf file correctly.

When i opened a pdf file made in Illustrator (Mac version) it showed a preview like this:
But when it was opened, the file looked like this:
As you can see, the text "RADIO TV" is missing, though it must be there.
That happens only when I open it in it's native CMYK mode, otherwise (RGB, LAB or GRAY) it renders ok.
When I open the file in Acrobat, it shows the text normally, (as on the first picture).
So I looked at the file closely in Illustrator, and found that all the layers are mostly with the same features, but why Photoshop treats them differently???
It's a vital question for me, as I work in a printing company, and we've lost money and can lose clients because of the error.

Have you asked in the Illustrator forum?
If you export a layered file to PDF from Photoshop using a Hight Quality print preset, it keeps text and shapes vectored. You can carry on zooming in on the PDF and still see fully sharp text and objects. But if you bring that same PDF back into Photoshop, it rasterizes the entire document unless you check 'maintain Photoshop layers' (something like that) when exporting to PDF.
So I am wondering what options there are when exporting to PDF from Illustrator, (at which I am still very much still learning). The Illustrator forum guys will be able to answer that in a flash I am sure.

CSS list-based navigation bar (Wordpress menu) doesn't render.

This website is powered by Wordpress with a custom HTML5/CSS3 theme. However, even after various attempts to debug and recode, the navigation menu (based on WP3's built-in menu feature) fails to render in Firefox, where it renders normally in Safari & Chrome.
Screenshots
Correct rendering (safari): http://cl.ly/CsSi
Firefox: http://cl.ly/CsuP

Looks like a missing ')' in one of the style rules that causes Firefxo to skip all subsequnt rules in that file.<br />
<br />
<pre><nowiki>-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);</nowiki></pre>
instead of:
<pre><nowiki>-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));</nowiki></pre>
You can see that in the Error Console.
<pre><nowiki>
Warning: Expected declaration but found '-moz-gradient'. Skipped to next declaration.
Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
Line: 1165
Warning: Unexpected end of file while searching for closing } of declaration block.
Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
Line: 2329</nowiki></pre>
http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
<pre><nowiki>.welcomebox {
padding: 1.5em;
background-image: -webkit-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
-khtml-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);-ms-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));border-radius: .25em;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
box-shadow: 0 3px 20px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #bfbfbf;
margin-bottom: 10px
</nowiki></pre>

I want to do a border-radius with box shadow and it doesn't work, why?

This should be simple but it's not working and I don't know why. I think the problem is in the html.
I simply want to have a div with an image inside that is circular and has an inset shadow and is centered on the page.
/*here is my css*/
#div3 {
-webkit-margin:25px auto;
-webkit-border-radius:50%;
.box-shad{
-webkit-box-shadow: 15px 15px 15px #8 inset;

<body>
<div class="gridContainer clearfix">
<div id="div3" class="fluid"><div class="box-shad"><a href="index.html"><img src="images/Big-tree-trans1.png" width="900" height="700" alt=""/></a></div>
</div>
</body>
Here is my website: www.adjacentdimensionsmedia.com

I want a different drop shadowed image on each page. Is there a way to do that?
Sure. Copy & paste the following code into a new, blank document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
img {
    max-width: 100%;
    vertical-align: baseline
body { background: #069 }
header, footer {
    clear: both;
    width: 100%;
    padding: 0 2%;
    background: #CCC;
    color: #000;
    min-height: 50px
article {
    clear: both;
    width: 75%;
    min-height: 600px;
    padding: 0 2%;
    background: #FFF;
    color: #069;
    margin: 0 auto;
.shadow img { box-shadow: 1px 3px 5px #333 }
.radius img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
.border img { border: 20px solid #069 }
.center {
    text-align: center;
    margin: 0 auto
</style>
</head>
<body>
<header>Header</header>
<article> <h1>Main content area</h1>
<div class="shadow radius border center">

<img src="http://placehold.it/500x325.jpg"> </div>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<p> </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
<footer>Footer</footer>
</body>
</html>
Nancy O.

My CSS box doesn't seem to be pushing the text out of the way

Hi guys,
Have
a look here
I've just managed to get CSS boxes working on my site, and as
you'll see have applied them to the right hand side of a number of
pages and added links. I looked at the site locally and online last
night from my machine and everything seemed to be working as
expected.
However, I've just got to work and had a look at some of the
pages and the text box A - doesn't seem to have extended enough to
surround all of the linked text and B - doesn't seem to have pushed
the surrounding text out of the way enough so now there's a
horrible overlapping this going on.
As I have set the box's height properties to something like
150 (can't quite remem) I'm assuming this is what is causing A and
B? So, how do I then set the box's properties so that it will
shorten or lenghten depending on how much text I put inside it -
just leave the height property field blank?
Hope you can help guys!
Let me know if you need more info.
Cheers,
James

JamesFryer wrote:
So, how do I then set the
> box's properties so that it will shorten or lenghten
depending on how much text
> I put inside it - just leave the height property field
blank?
Yes. The answer is to never set the height of a box which
contains text
(unless its for a scrolling area). Let the amount of text
within the box
determine the height.

Safari on iPhone 4 doesn't render web sites correctly, white rectangle hides most of web site view

I started having a problem with Safari on the second day of using my iPhone.
Since today, Safari will not render any web site correctly anymore, there is always a white rectangle hiding most of the web site view, web site browsing is now impossible, only a small area on the top and right remains visible.
How can this be fixed ?

Well, try restarting your phone, if that doesn't help, restore it with iTunes.

Firefox displays the CSS "outline:;" on the outside of "-moz-box-shadow:;".

When using "outline" and "-moz-box-shadow" together, the outline is drawn on the outside or around the box shadow.
---Example:----------------
<pre><nowiki>
.box {
outline:1px solid rgb(0,0,0);
-moz-box-shadow:0 1px 5px rgb(90,90,90);
}</nowiki></pre>
Will this be fixed soon?

Since this seems to have some search engine ranking. This is https://bugzilla.mozilla.org/show_bug.cgi?id=480888 open as of this comment.
Please be considerate of developers time, don't comment on the bug unless you are offering to help fix it.

Photoshop Webkit Rendering not supporting box-shadow

Hi there,
I've created a panel with an HTML Widget. Inside I have some embeded html with some CSS3 styles applied to an element. All CSS3 properties are working fine except -webkit-box-shadow or box-shadow.
Does Photoshop's Webkit rendering not support these properties? border-radius and background gradients work just fine.
Thanks

It's not on the list of webkit CSS properties supported in
AIR:
http://livedocs.adobe.com/air/1/devappshtml/AboutHTMLEnvironment_3.html

Box shadow problem in IE 8-9

I want to place CSS drop shadows on different objects on a web page. It works perfectly in Safari, FF, Chrome and Opera both in Widows and OS X, but fails in IE 8 & 9. Any help would be much apreaciated. VL Branko
Here is the CSS:
/* this is for putting drop shadows on images that are placed in the text area which is generally white or very light colored */
.dropshadowtext {
-moz-box-shadow: 5px 5px 8px #999; /* Firefox */
-webkit-box-shadow: 5px 5px 8px #999; /* Safari/Chrome */
box-shadow: 5px 5px 8px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#999999)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#999);/* IE 5.5 - 7 */
/* this is for putting drop shadows on images that are placed in areas other than the text area */
.dropshadowbackground {
-moz-box-shadow: 6px 6px 5px #35454c; /* Firefox */
-webkit-box-shadow: 6px 6px 5px #35454c; /* Safari/Chrome */
box-shadow: 6px 6px 5px #35454c; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c);/* IE 5.5 - 7 */
/* this is for putting a drop shadow under the area where there text is written color of shadow will depend on the background*/
.dropshadowunderwritingarea {
-moz-box-shadow: 6px 6px 5px #35454c; /* Firefox */
-webkit-box-shadow: 6px 6px 5px #35454c; /* Safari/Chrome */
box-shadow: 6px 6px 5px #35454c; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c)";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#35454c);/* IE 5.5 - 7 */

I was away for a few days hence late reply. I removed the MS filters from the CSS but it still didn't work in IE9 when I check in browser lab.
I see that you have a demo of how to do it for various versions of IE at
http://alt-web.com/DEMOS/CSS-Shadows.shtml
It worked when I checked in browser labs. Are you no longer recomending this? How would you implement it in CSS?
As for the validation errors they seem to be artifacts left over when converting from Adobe Golive to Dreamweaver. More deadwood to clean out.

Is it possible to get a box shadow in at least IE 8?

I hope this isn't a stupid or redundant question, but is check out this one page site.
www.juliaawebb.com
I'm not worried about IE 7, and some of you might shoot me, but is there a way to make the box shadows work in IE 8 for my top 2 middle boxes (one with phone number and the other with her name) AND the little Contact box? In modern browsers they work great. Is it just that the box shadow in my CSS is using RGB? Like maybe the box shadow needs to be hex...?
Any help would be super! Thanks in advance...

You must use IE conditional comments and filters.
http://alt-web.com/DEMOS/CSS-Shadows.shtml
Nancy O.

Settting render attribute doesn't render the child taskflow

i am having 2 taskflows which is consumed by a consuming page.
On the consuming page on which these 2 taskflows are dropped as region.
the 2 regions are placed along with some buttons inside separate panelGroupLayouts.
i mean in 1 panelGroupLayout 1 region and button is there and similarly in 2nd panaleGroupLayout other regin and button.
On consuming page there is next button , i have set it to render 1st panelGroupLayout.
when i click Next button it renders the 1st region and buttons correctly. But when i click the back button from the 1st region and come back to consuming page and again click NEXT button, it remains at the same consuming page
and doesn't render the region 1 and its buttons again.
in code, on the 1st panelGroupLayout i have put rendered="a variable in backingbean of consuming page which i am setting to true on the next button click event".
Please help in this issue.
Thanks in advance.

user, please tell us your jdev version!
it you yet the rendered property to false you have to do a full refresh to get the region back. Use the visible property instead.
Timo

CSS Box Problem

Hi,
My site have a some problem in css box. Screen shot is attached for reference.
Please help for the same.
Weblink

Have some performance issues on Windows XP, too.
I am using d3d prism settings to render on Windows 7 and XP. On Windows 7 everything working fine.
On Windows XP it is slow and sometimes flickering.
I didn't find a solution.
1) Tried to start the application with other prism settings like -Dprism.order=d2d and OpenGL.
2) I changed the 3d graphic settings that made it better, but didn't solve the issue.
Someone knows the difference of rendering the javafx application in Windows 7 and XP (DirectX 11, DirectX9.0c)?

-webkit-box-shadow not working on Air

-webkit-box-shadow not working on Air anyone know why that
is?
It works on Safari but if I add it to my Html/Ajax app in air
its no go.

It's not on the list of webkit CSS properties supported in
AIR:
http://livedocs.adobe.com/air/1/devappshtml/AboutHTMLEnvironment_3.html

IOS8 doesn't render CSS box shadows correctly

Similar Messages

Maybe you are looking for