IPB

Welcome Guest ( Log In | Register )

> Hydrogenaudio Forum Rules

- No Warez. This includes warez links, cracks and/or requests for help in getting illegal software or copyrighted music tracks!
- No Spamming or Trolling on the boards, this includes useless posts, trying to only increase post count or trying to deliberately create a flame war.
- No Hateful or Disrespectful posts. This includes: bashing, name-calling or insults directed at a board member.
- Click here for complete Hydrogenaudio Terms of Service

 
Reply to this topicStart new topic
CSS help w/ iOS, Safari for iOS not playing nice
AliceWonder
post Sep 24 2012, 22:36
Post #1





Group: Members
Posts: 119
Joined: 13-July 12
From: California
Member No.: 101393



I'm working on an HTML5 / jQuery jukebox - it is suppose to replace a flash based jukebox.

http://www.clfsrpm.net/sample/

The jukebox control buttons are suppose to resize as the window resizes so width/height attributes are not used.
It seems to work everywhere except in Safari for iOS where the buttons for the controls do not show the images (tested on my iPod).
Works just fine in Safari for Windows.
Works just fine in other Linux / Windows browsers
Works just fine in various Android browsers.

Seems to only be a problem in Safari for iOS.

Here's the relevant html:

CODE
<div id="jukebox">
   <div id="jbox-controls">
      <progress max="100" value="0"></progress>
      <button type="button" id="jbox-prev" title="Prev Track">
         <img src="prev.png" alt="[Prev]">
      </button>
      <button type="button" id="jbox-play" title="Play Track">
         <img src="play.png" alt="[Play]">
      </button>
      *snip*
</div>


and the relevant css:

CODE
div#jbox-controls {
    display: inline-block;
    text-align: center;
    width: 100%;
}

*snip*

div#jbox-controls button {
    margin-top: 7px;
    margin-bottom: 7px;
    width: 18%;
    display: inline;
}

div#jbox-controls img {
    width: 100%;
    /*margin: auto;*/
    /*display: inline;*/
}


Thanks for any suggestions.
Go to the top of the page
+Quote Post
Sebastian Mares
post Oct 19 2012, 15:52
Post #2





Group: Members
Posts: 3637
Joined: 14-May 03
From: Bad Herrenalb
Member No.: 6613



Try adding -webkit-appearance:none to the buttons.


--------------------
http://listening-tests.hydrogenaudio.org/sebastian/
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 23rd December 2014 - 03:18