Yes, I am having the same problem. The plugin also gets really big when zooming. Would it be possible to avoid having it scrolling down and magnifying maybe?
EDIT: My site in case you want to check is dathin.net
I’m having trouble with the form on iPhone as well. It is flashing open as I scroll down the page which obstructs the text.
Issue does not replicate on the iPad, only on iPhone.
http://www.DurangoWebDevelopment.com
I came here to report on the same problem. I’ve gotten verified user reports of the Slick Form covering most of their page on iPhone 4S, using iOS 6 and Safari with the latest updates.
The issue seems to be with the code that should collapse the form on loading.
With a different type of phone (waiting for info on what was the make and model) I’ve seen the same happen in a slightly different way: the form was not collapsed automatically and it was placed wrong. Instead of being in a CSS “fixed” position at eg. bottom right of the screen, it was located closer to widget area where it was loaded. The bottom of the expanded Slick Form was approximately where a computer browser window would have the 800-1000th horizontal row of pixels. Perhaps the placement was done in accordance to a somehow emulated browser window.
http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/ states that despite iOS 5 supporting fixed positioning, “there are still some good reasons to depend on third party libraries like iScroll.”
I don’t have an iPhone to test with so can’t really recommend one solution over another possible one yet. http://testiphone.com/ seems to emulate iPhone, but I’m not sure how well. I’ll report back when I get some testing done with someone’s iPhone.
I’ve now gotten the following test results:
iPhone 4S, iOS 6 with latest updates, Safari: The feedback form is always open and displayed in the center of the screen instead of its proper position. With the small screen this is most counter-productive, so I’m considering a workaround for the plugin to display nothing for iPhone clients.
iPhone 5, iOS 6.0.1 with latest updates, Safari: The same. User reported all iOS 5 versions should have the same CSS / JS support in regards to this.
Nokia Lumia 710, Internet Explorer: The feedback form is always open and displayed in the widget area instead of its proper position.
Plugin Author
remix4
(@remix4)
@daedalon re Nokia Lumia – this indicates a javascript error elsewhere on the page that is preventing the jquery from loading
To hide the form on mobiles you can add the following css to your responsive website media queries:
.dc-contact-slick {display: none;}
Workaround: hide the widget completely for Safari on iPhone 4 and 5 and IEMobile 9.0 on Lumia 710.
Open dcwp_slick_contact.php, locate line 13:
global $registered_skins;
and paste above it:
// Custom: Don't display widget for mobile browsers with compatibility issues
// 'iPhone3C' is the user agent for some iPhone 4 models, but not any iPhone 3 models. http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if ( strpos( $user_agent, 'IEMobile/9.0; NOKIA; Lumia 710)' )
|| ( strpos( $user_agent, 'Safari' )
&& (
strpos( $user_agent, 'iPhone3C' )
|| strpos( $user_agent, 'iPhone4' )
|| strpos( $user_agent, 'iPhone5' )
)
) {
return;
}
You can test that it works by temporarily changing ‘Lumia 710’ to eg. ‘Firefox’, if you’re using Firefox. The widget should disappear when you refresh (and clear the cache of any cache plugins you might use). Don’t forget to restore the Lumia or no Firefox users would not see the widget. Feel free to tweak further and share your improvements.
Remix4: Thanks for the info. With any luck it’s a JS bug in IEMobile9.0, and a later update will fix it for Lumia 710.
The CSS workaround is more update-safe. It needs a separate declaration so that the setting is activated only for mobile clients, or even better, only the affected ones (iPhone 4 & 5: Safari; Lumia 710: IE9Mobile verified). The PHP solution I posted should limit the effect to the affected clients only and it provides a tiny bit better performance, but an update of the plugin would naturally erase it.
Thank you Daedalon and Remix4 for all of your help and efforts.
CSS tweak worked great for me as I am not as literate with PHP…
I’ve improved the PHP solution meanwhile. However, it seems that cache plugins such as WP Super Cache will render it mostly useless by sending the same page to all users.
CSS solution has the advantage of working regardless of cache settings. Any recommendations on how to use the following CSS rule only for certain affected mobile browsers?
.dc-contact-slick {display: none;}
Not sure how to accomplish browser specific so had to base it on screen resolution…
My theme has some responsive CSS declarations so, if yours does, you can place it in there… I have a few for different screen resolutions so I added the display: none; to all less than 768px:
E.g.
@media only screen and ( max-width: 767px ) {
.dc-contact-slick {display: none;}
}
Thanks, SweetPweb. The theme I’m currently using, Elbee Elgee, doesn’t have responsive declarations by default.
Opera Mobile 12 on Nokia E71 with a 320 x 240 px screen shows the feedback form exactly as it should. But there are certain browsers that show it horribly wrong, such as Safari on iPhones (but not on Macs), so I’m looking for CSS or HTML that can be used to affect the display only on those exact problematic browsers.
I’ll be looking at jQuery Safari iPhone detection (search results) next, but if someone knows of a solution already, that’d be handy 🙂
JohnWilson1‘s message right above this one seems like spam to me.
