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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...