Jump to content
Sign in to follow this  
jarto

Beware of box shadows!

Recommended Posts

I have been working on a new TW3StringGrid for Smart Mobile Studio. The original plan was to include it in 3.0, but there was a problem: It was slow on iOS. So, ever since the release, I've tried to crack this problem. How can Javascript that works beautifully on every other platform and browser be absolutely horrible on iOS? It was extremely fast on desktop browsers and  Android tablets. On iOS it took seconds to draw the grid and scrolling it was close to unusable.
 
After countless of hours of testing and trying, I finally found the reason: Box shadows in CSS. For example:
.TW3ContainerBorder {
        border-radius:  <?pas=EdgeRounding?>;
  border-top:     1px solid rgba(250, 250, 250, 0.7);
  border-left:    1px solid rgba(250, 250, 250, 0.7);
  border-right:   1px solid rgba(240, 240, 240, 0.5);
  border-bottom:  1px solid rgba(240, 240, 240, 0.5);
  -webkit-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.3)?>;
     -moz-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.3)?>;
      -ms-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.3)?>;
       -o-box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.3)?>;
          box-shadow: 0px 0px 1px 1px <?pas=GetRGBA(clDlgShadowBaseColor, 0.3)?>;
}


.TW3FlatBorder {
        border-radius:  <?pas=EdgeRounding?>;
  border-top:     1px solid rgba(44, 44, 44, 0.8);
  border-left:    1px solid rgba(44, 44, 44, 0.8);
  border-right:   1px solid rgba(44, 44, 44, 0.8);
  border-bottom:  1px solid rgba(44, 44, 44, 0.8);
}

I had used a TW3ContainerBorder for every cell in the grid. Replacing them with a flat border improved performance dramatically on iOS. Something like an order of magnitude faster.

 
So if you've been having performance problems with iOS, that's most likely the reason.

Share this post


Link to post
Share on other sites

I think box-shadow CSS will need 3 things to work on iOS:

1) Vendor Prefix on the box-shadow -webkit-box-shadow: {...}
2) Border Radius set, example to 1px border-radius: 1px 
3) disabled appearance -webkit-appearance: none; //--> remember to put it before box-shadow, not after

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×