1

I can't understand why the code below isn't properly rendered on iPad (Safari and Chrome) while it's ok on iPhone (Safari), Android, pc.

The button is there on iPad* -- if I tap in the bottom right corner actually I trigger the action -- just the button is not visible.

I use linux, so debugging on iPad came out to be tough... any advice?

<div id="print-button">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 104 104">
  <circle r="50" cx="50" cy="50"></circle>
  <path d="M25 ... " transform="matrix(0.65,0,0,0.65,17.5,17.5)"></path>
  </svg>
</div>

<style>    
#print-button {
    width: 5.5rem;
    height: 5.5rem;
    cursor: pointer;
    position: fixed;
    right: 2%;
    bottom: 2%;
}
</style>

(*) sorry for providing the real link rather than recreating the whole thing in a js fiddle, I hope it does not break any rule.

About this being a duplicate question of ... (see comment below)

wout
  • 2,477
  • 2
  • 21
  • 32
neurino
  • 11,500
  • 2
  • 40
  • 63
  • Possible duplicate of [CSS "position: fixed;" on iPad/iPhone?](http://stackoverflow.com/questions/4889601/css-position-fixed-on-ipad-iphone) – Blackbam Apr 06 '17 at 17:22
  • @Blackbam: I saw it and that's a 2011 question, considering something has changed in 6 years? However I tried on another iPad and the button is there, I don't know what to think... – neurino Apr 06 '17 at 17:25
  • caiuse.com is a great resource for this sort of thing. But, from what I can tell, `position: fixed` is supported in iOS... – Hudson Taylor Apr 06 '17 at 17:55

0 Answers0