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
post Sep 24 2012, 22:36
Post #1

Group: Members
Posts: 121
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.


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:

<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 type="button" id="jbox-play" title="Play Track">
         <img src="play.png" alt="[Play]">

and the relevant css:

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


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: 3645
Joined: 14-May 03
From: Bad Herrenalb
Member No.: 6613

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

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: 1st December 2015 - 16:32