Awesome! Glad we figured this out :-)

Best,

Chris

Thank you!!! Frickin genius! Worked like a charm :))))))

Hi there,

I realized something... Chrome and Safari both add an outline to the input when you click in the box. I added "outline:none;" to the input/textarea via CSS, and that seems to remove the outline event, which also seems to address this browser bug. Here's what I did...

Open style.css and change the following on lines 509-510 from this...

input[type="text"],input[type="password"] {padding:10px; width:45%; margin:5px 0 0 0; border:none; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,.15)}
textarea {padding:9px; width:90%; height: 150px; font-size:12px; border:none; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,.15)}

...to this...

input[type="text"],input[type="password"],input[type="email"] {padding:10px; width:45%; margin:5px 0 0 0; border:none; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,.15); outline: none;}
textarea {padding:9px; width:90%; height: 150px; font-size:12px; border:none; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,.15); outline: none;}

(I also added styling for the new email input field added by Contact Form 7).

Let me know if that works on your end.

Best,

Chris

Hi there,

You're right. This makes sense because Safari and Chrome use the same browser engine (webkit). I'm about 90% sure this isn't a theme-related issue, but has to do with a browser bug. I'm seeing similar issues mentioned here:

Example 1: http://code.google.com/p/chromium/issues/detail?id=111218

Example 2: http://stackoverflow.com/questions/9275802/css-background-image-disappearing-in-chrome

I'll continue to double-check this to make sure there isn't another method to accommodate this issue.

Best,

Chris

Hi again Chris,
Thanks so much for the attention on this thread and sorry to keep dragging it out. My issue is actually in Chrome and even after I've updated the codes as per your instructions above, I still have issues with my HTML5 forms when used below the video module. You say it's not an issue with the theme yet it seems very much to be a problem. As I said all I have installed is akismet and contact form 7 (or I disable contact form 7 and use another plugin) and if the form is below the video plugin, clicking inside the forms breaks the images in many of the panels.

Would you please help with this fix as the problem is not yet resolved?

Thanks!

Hi there,

I posted instructions that address background issues in Safari. Good news is that this isn't a theme issue, but the bad news is that it's a Safari bug with how it handles background images that have a fixed attachment.

Here's the fix: http://www.themolitor.com/forums/topic/update-v111-for-panels

If you have questions, please continue this conversation in that thread. I'll close this thread for now.

Thanks!

Chris

Hi there,

Thanks for the additional details. That helps. Since I can't recreate the problem on my demo site, I'm marking this thread "pending review" as I'll have to research this to see if it actually is a theme issue.

Best,

Chris

Hi Chris,
Thanks for looking into this again! Unfortunately it seems like the video code from template is incompatible with many different contact forms. I went ahead and deleted the contact form 7 plugin and used a new one (js contact form) and again, any time the video panel is above the contact form and the user clicks into the form, all of the background images break. This seems like a pretty big issue related to the theme. Would it be possible to have your help please to assist in resolving this? The only other plugin I have enabled is akismet. There's something with forms and the video code from your theme that are creating conflicts!

Thanks very much,
Khellar

I did a test with a contact form and vimeo videos here: http://test.themolitor.com/panels/

I don't experience any issues, so this leads me to think it has something to do with your particular setup. Do you have additional plugins installed? If so, try deactivating those to see if the issue still occurs.

If that doesn't help, try removing any pages from the menu that have iframe/embedded content (except for the contact page and video embed pages) and see if the issue still occurs.

Let me know.

Best,

Chris

Looking into it now...

Still awaiting your help with this, thank you :)

Ok so I found the culprit! When I add a vimeo video to the page, clicking inside my contact form breaks all the background images. What would be the best way to remedy this? I definitely need to include video.

My video page is simply this:
<h2>Video</h2>
[vimeo id="70461752"]

Let me know if you want me to re-enable the video so you can check it out. Thanks for your time as always.

Hi there,

I see it now... This is really odd. Do you have additional plugins installed? If so, try deactivating those to see if the issue still occurs.

If that doesn't help, try removing any pages from the menu that have iframe/embedded content (except for the contact page) and see if the issue still occurs.

Let me know.

Best,

Chris

Hey thanks for the quick response Chris. Actually no the issue hasn't been resolved yet. Anytime I click in on of the fields most of the lower background images disappear. I'm on os x mountain lion using chrome (Version 28.0.1500.71) and safari (6.0.2), both of which are giving the same issue.

If you don't have a mac system to replicate the issue, you can use Mountain Lion and Chrome (v27 or 28) options at browserstack.com (free trial acct takes 2 seconds to create). If you do you will see that when you click inside the form, all the background images break on the lower pages.

Any help would be greatly appreciated!

Hi there,

I took a look at your site (looks great, BTW) and scrolled down to the contact form and sent a test message. Nothing changed or disappeared for me. Resolved?

If not, can you provide details about the browser you're using? I tested on FireFox v22.0 and everything looks perfect.

Thanks!

Chris

Hi, I'm got a strange situation on my site where I've added a contact form but every time I click in the field it breaks all the background images after the first few pages. If I reorder the menu pages, the ones that were broken before are now showing up at the top and the ones that were working before are broken below.

I'll say it again. When the page loads, all the background images are there. When I click, all the backgrounds except for whichever 3 or 4 happen to be on top get broken and disappear. Any clue how to fix this please?

http://shawnimusic.com/new/

Thank you!