Hello,
Kendo UI version: 2022.3.1109
Kendo Scheduler Vue Wrapper version : 2022.3.1109
Browser: Safari > v12
By default, iPad on iOS greater than version 12 using Safari are show websites in desktop mode. When the Scheduler is displayed, the scroll is not working (even if we force the settings mobile to true or phone or tablet). So we can't scroll through the timeline.
When we switch the iPad to request a mobile site, the scroll is working.
With an iPad with iOS version 12 or below, there is no issue.
I think the issue is related to this github issue I found for the Spreadsheet wrapper for vue: https://github.com/telerik/kendo-ui-core/issues/5300
Is there a work around for that ?
Best Regards,
Fabien
Hello, Fabien.
I’ve tested this Dojo example using Apple's XCode simulator but cannot replicate the issue you shared.
Can you please test the above Dojo on the iPad on which you are experiencing the reported issue? Is the reported behavior replicable when running the Dojo?
If the issue is not replicable, may I ask you to edit the above dojo(from here) so we can replicate the scrolling issue?
Hello Petar,
I was not able to reproduce the issue with Dojo, nor with a sandbox (https://codesandbox.io/s/kendo-scheduler-cdn-wz51o9-wz51o9?file=/src/components/HelloWorld.vue). But then, analyzing the difference between the sandbox and our code, I found this :
On the sandbox where it's working, we have the k-scheduler-content element setup like this :
<div class="k-scheduler-content km-widget km-scroll-wrapper" data-role="scroller" style="overflow: hidden;" id="f379d1ad-2eb6-42eb-a8a6-953abcf006a6">[...]</div>On our code, it's like this :
<div class="k-scheduler-content" style="height: 859px; touch-action: pinch-zoom;"></div>If I remove the touch-action, or add pan-y to the touch-action, scroll is working.
What's bothering me is we don't modify the css class of the k-scheduler-content nor modifying the style property of this div element.
What could explain such difference with the same version of the packages ?
Hi, Fabien.
Can you please share the package.json file of the project you are experiencing issues with? Can you please also check if there isn't a package-lock.json file that could be locking the version of the Scheduler Wrapper package to an older version?
If the above is not the case, can you try to isolate the issue in a small runnable example and send this example to us? Being able to replicate the difference in the rendering, we can investigate the issue deeper and thus provide more relevant feedback about it.
Looking forward to your reply.
Hi Petar, here is the package.json :
{ "name": "project", "version": "1.2.3", "private": true, "description": "frontend to the project", "author": "SysCo", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", "@fortawesome/vue-fontawesome": "^2.0.8", "@progress/kendo-buttons-vue-wrapper": "^2022.3.1109", "@progress/kendo-charts-vue-wrapper": "^2022.3.1109", "@progress/kendo-datasource-vue-wrapper": "^2022.3.1109", "@progress/kendo-dateinputs-vue-wrapper": "^2022.3.1109", "@progress/kendo-dropdowns-vue-wrapper": "^2022.3.1109", "@progress/kendo-inputs-vue-wrapper": "^2022.3.1109", "@progress/kendo-licensing": "^1.2.2", "@progress/kendo-listbox-vue-wrapper": "^2022.3.1109", "@progress/kendo-mediaplayer-vue-wrapper": "^2022.3.1109", "@progress/kendo-popups-vue-wrapper": "^2022.3.1109", "@progress/kendo-scheduler-vue-wrapper": "^2022.3.1109", "@progress/kendo-theme-bootstrap": "^5.12.0", "@progress/kendo-ui": "^2022.3.1109", "@progress/kendo-validator-vue-wrapper": "^2022.3.1109", "@progress/kendo-vue-buttons": "^3.7.3", "@progress/kendo-vue-intl": "^3.7.3", "@progress/kendo-vue-layout": "^3.7.3", "@progress/kendo-vue-upload": "^3.7.3", "@progress/kendo-window-vue-wrapper": "^2022.3.1109", "axios": "^1.1.3", "bootstrap": "^4.6.2", "bootstrap-vue": "^2.23.1", "core-js": "^3.8.3", "crypto-js": "^4.1.1", "lz-string": "^1.4.4", "moment": "^2.29.4", "vee-validate": "^2.2.15", "vue": "^2.7.13", "vue-advanced-cropper": "^1.11.5", "vue-axios": "^2.1.5", "vue-i18n": "^8.27.2", "vue-pdf-embed": "^1.1.4", "vue-router": "^3.6.5", "vue-stepper-component": "^1.0.0", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^8.0.3", "moment-locales-webpack-plugin": "^1.2.0", "prettier": "^2.7.1", "sass": "^1.55.0", "sass-loader": "^13.1.0", "style-loader": "^3.3.1", "style-resources-loader": "^1.4.1", "vue-cli-plugin-style-resources-loader": "~0.1.5", "vue-template-compiler": "^2.6.14", "webpack": "^5.75.0" }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "optionalDependencies": { "fsevents": "*" } }I'm not able to reproduce it in a small and runnable example, yet as the issue is with Safari only (and stackblitz does not support it).
Hi, SysCo.
The packages' versions seem to be OK. The versions of the different components that you use are not old, so probably it is something to the configuration of the Scheduler.
Can you please share if there is a configuration of the Scheduler Wrapper's mobile property? In the example I sent you, the property has a value of "true". Can you please set the value of the property if you haven't set it by now and let me know if this resolves the issue?
Can you please also try to set the mobile prop value to "phone"?
Please try the above suggestions and let me know if this resolves the discussed issue.
Issue is present with the true value, as well as the tablet or phone value. I'm able to circumvent the issue by adding this to my CSS :
@media (hover: none) and (pointer: coarse) { .k-scheduler-content { touch-action: pan-y pinch-zoom !important; } }Hi, Fabien.
Thank you for sharing with the community, the solution that you used for resolving the discussed issue!
Your post will definitely help someone in the future!